<template>
  <div class="wx_wepage_check">
    <div class="conditions">
      <el-row>
        <el-col :span="8"><el-input v-model="wd" placeholder="请输入标题关键字搜索" @keyup.enter.native="submitSearch"></el-input></el-col>
        <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
      </el-row>
      <el-row>
        <span class="label">内容性质：</span>
        <el-select v-model="attrId" placeholder="不限" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </el-row>
    </div>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="wePageCheckList.list" stripe class="table">
      <el-table-column label="标题">
        <template slot-scope="scope">
          <a :href="`${baseUrl}/content/micro/preview/${scope.row.logicId}`" target="_blank">{{scope.row.title}}</a>
        </template>
      </el-table-column>
      <el-table-column label="二维码" class-name="is-center" width="80px">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            width="100"
            popper-class="popper_qr"
            trigger="click">
            <img class="img_qr" :src="`data:image/png;base64,${scope.row.qrCode}`" alt="">
            <i class="icon icon-erweima" slot="reference"></i>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="内容性质" prop="attrName"></el-table-column>
      <el-table-column label="提交人" prop="username"></el-table-column>
      <el-table-column label="提交时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200"  class-name="is-center">
        <template slot-scope='scope'>
          <template v-if="wePageCheckList.op">
            <el-button type="text" @click="handlePass(scope.row.id)">通过</el-button>
            <el-button type="text" @click="checkId=scope.row.id;dialogShow=true;">不通过</el-button>
          </template>
          <div v-else>权限不足</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="sizes, total, prev, pager, next, jumper"
        :page-sizes="[10, 30, 50, 100]"
        :total="wePageCheckList.page.total"
        @current-change="submitSearch()"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 审核不通过弹层 -->
    <el-dialog title="审核不通过原因" :visible.sync="dialogShow" width="30%" @open="reason=''">
      <el-input v-model="reason" type="textarea" placeholder="请输入原因，不多于255字" :maxlength="255"></el-input>
      <div slot="footer">
        <el-button type="primary" @click="handleNoPass">确定</el-button>
        <el-button type="primary" @click="dialogShow=false;">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import config from '@/config/env'
  import eventBus from '@/components/common/eventBus'
  export default {
    data () {
      return {
        wd: '',
        attrId: null,
        sourceType: 1,
        authStatus: null,
        page: 1,
        size: 10,
        reason: null,
        dialogShow: false,
        tbLoading: false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        wePageCheckList: state => state.contentManage.wePageCheckList,
        attrs: state => state.contentManage.contentType
      }),
      baseUrl () {
        return config.baseUrl2
      }
    },
    methods: {
      ...mapActions(['wePageAuditList', 'getContentTypes', 'setReleaseCheck']),
      async initPage () {
        this.getContentTypes()
        await this.submitSearch()
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 搜索
      async submitSearch () {
        this.tbLoading = true
        await this.wePageAuditList({
          title: this.wd,
          attrId: this.attrId,
          auditStatus: 0,
          page: this.page,
          size: this.size
        })
        this.tbLoading = false
      },
      // 改变分页大小
      handleSizeChange (size) {
        this.size = size
        this.submitSearch()
      },
      // 通过审核
      async handlePass (id) {
        await this.$confirm('确认审核通过该条记录？', '审核提示')
        const res = await this.setReleaseCheck({
          auditId: id,
          auditStatus: 1
        })
        if (res.data.code === 1) {
          this.$message('成功')
          this.submitSearch()
          eventBus.$emit('getReleaseCheckNum')
        }
      },
      // 不通过审核
      async handleNoPass () {
        const res = await this.setReleaseCheck({
          auditId: this.checkId,
          auditStatus: 2,
          reason: this.reason
        })
        if (res.data.code === 1) {
          this.$message.success(res.data.msgZ)
          this.submitSearch()
          this.dialogShow = false
          eventBus.$emit('getReleaseCheckNum')
        }
      }
    }
  }
</script>
<style lang="scss">
  .wx_wepage_check{
    .el-row{margin-bottom:22px;}
    .label{margin-right:8px;font-size:14px;}
    .el-table {
      td {padding:5px 0;vertical-align:top;}
      .icon{font-size:20px;cursor:pointer;}
      a{color:#1F2D3D;text-decoration:none;white-space:nowrap;}
    }
    .el-tag{margin-left:10px;height:18px;line-height:16px;}
    .newsItem{
      &{margin-top:10px;overflow:hidden;}
      .preview{float:left;width:100px;height:100px;}
      .content{margin-left:110px;}
    }
  }
  .popper_qr{
    &{min-width:auto;}
    .img_qr{margin:-10px;width:120px;height:120px;}
  }
</style>
